<template>
  <a-row type="flex" :compact="compact" :gutter="gutter" :justify="justify" :align="align">
    <slot/>
  </a-row>
</template>
<script>
// import 'ant-design-vue/dist/antd.css'

export default {
  name: 'ZhRow',
  props: {
    gutter: {
      type: Array,
      default: function () {
        return [0, 0]
      }
    },
    //flex 布局下的水平排列方式：start end center space-around space-between
    justify: {
      type: String,
      default: "start"
    },
    //行内对齐  布局下的垂直对齐方式：top middle bottom
    align: {
      type: String,
      default: "top"
    },
    span: Number,
    //≥768px
    md: {
      type: Number,
      default: 12
    },
    //≥576px
    sm: {
      type: Number,
      default: 24
    },
    //<576px
    xs: {
      type: Number,
      default: 24
    },
    //≥992px
    lg: {
      type: Number,
      default: 8
    },
    //≥1200px
    xl: {
      type: Number,
      default: 8
    },
    //≥1600px
    xxl: {
      type: Number,
      default: 6
    }
  },
  data() {
    return {
      compact: true
    }
  },
  created() {
    // console.log(this.$parent)
    this.getCompact()
  },
  methods: {
    getCompact(data) {
      let compact = null;
      let parent = null;
      if (data) {
        parent = data.$parent;
      } else {
        parent = this.$parent;
      }
      if (parent) {
        compact = parent.compact
        if (compact === null || compact === undefined) {
          this.getCompact(parent)
        } else {
          this.compact = compact
        }

      } else {
        this.compact = false
      }
    },
  }
}
</script>
<style scoped lang="scss">

</style>